<template>
  <view>
    <u-navbar :title="barTitle" auto-back fixed placeholder @left-click="goBack()"></u-navbar>
    <view class="content">
      <view class="sign">
        <view class="sign_card">
          <view class="sign_card_body">
            <view class="sign_code">
              <view class="code_circle" :class="{ animation: !timeout, timeout: timeout }">
                <view v-if="timeout" style="color: #ff1111;font-size: 18px;">
                  签到已截止
                </view>
                <view v-else>
                  <view>剩余</view>
                  <view>{{ timeStr }}</view>
                  <u-code-input v-model="code" maxlength="4" mode="bottomLine" v-if="type == '1'"
                  bold :space="5" borderColor="transparent"></u-code-input>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sign_list">
        <u-sticky>
          <u-tabs :list="tabs" @click="changeTab" :current="current" line-color="#00a679"></u-tabs>
        </u-sticky>
        <swiper class="swiper" :current="current" :duration="300" disable-touch>
          <swiper-item>
            <view class="swiper-item-content">
              <view v-if="signList.length != 0">
                <u-cell v-for="item in signList" :key="item.id"
                :title="item.name" :label="item.id" :icon="item.avatar"></u-cell>
                <u-loadmore status="nomore"></u-loadmore>
              </view>
              <u-empty v-else icon="/static/sign_data.png" text="暂无学生签到"></u-empty>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item-content">
              <view v-if="noSignList.length != 0">
                <u-cell v-for="item in noSignList" :key="item.id" :title="item.name" :label="item.id"
                :value="item.noSign ? '请假' : ''">
                  <u-avatar slot="icon" :src="fileUrl + item.avatar" style="margin-right: 10px;"></u-avatar>
                </u-cell>
                <u-loadmore status="nomore"></u-loadmore>
              </view>
              <u-empty v-else icon="/static/no_sign_data.png" text="暂无学生未签到"></u-empty>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
import {
  secondsTransformToStr
} from '@/utils/date'
import {
  getSignRecord
} from '@/api/subject'
export default {
  data() {
    return {
      barTitle: '签到',
      id: '',
      type: '',
      item: {},
      timeStr: '',
      current: 0,
      signList: [],
      noSignList: [],
      timeout: false,
      swipetHeight: 200
    }
  },
  computed: {
    tabs() {
      return [
        {
          name: '已签到',
          badge: {
            value: this.signList.length
          }
        }, {
          name: '未签到',
          badge: {
            value: this.noSignList.length
          }
        }
      ]
    }
  },
  methods: {
    countZero(time) {
      this.timeStr = secondsTransformToStr(time)
    },
    changeTab(val) {
      this.current = val.index
    },
    getSignList() {
      getSignRecord({ id: this.id }).then(res => {
        if(res.code === 200) {
          this.signList = res.data.signList
          this.noSignList = res.data.noSignList
        }
      })
    },
  },
  onLoad(options) {
    const item = JSON.parse(options.item)
    this.type = item.type
    if(item.type == '0') {
      this.barTitle = '拍照打卡'
    }else if(item.type == '1') {
      this.barTitle = '验证码签到'
    }else if(item.type == '2') {
      this.barTitle = '上课签到'
    }
    this.id = item.id
    const curdate = new Date()
    const enddate = new Date(item.end_time)
    const dif = enddate.getTime() - curdate.getTime()
    if(dif > 0) {
      let time = dif / 1000
      this.countZero(time)
      this.timer = setInterval(() => {
        time--
        this.countZero(time)
      }, 1000)
    }
    this.timeout = dif < 0
    this.getSignList()
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.content {
  overflow: hidden;
}
.sign {
  padding: 0 15px;

  &_card {
    width: auto;
    padding: 10px 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;

    &_title {
      padding-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .code_circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 50vw;
    height: 50vw;
    margin: 30px auto;
    border-radius: 50%;
    box-shadow: 0 0 24px 8px rgba($color: #4088f4, $alpha: .5);
    
    &.animation {
      animation: shadow 2s ease infinite alternate;
    }

    &.timeout {
      box-shadow: 0 0 24px 0px rgba($color: #ce2929, $alpha: .2);
    }

    view {
      margin-bottom: 5px;
      font-weight: bold;
      letter-spacing: 1px;
      font-size: 15px;
    }

    view:nth-child(2) {
      margin-bottom: 15px;
      font-size: 18px;
    }
  }
}

.sign_list {
  height: calc(100% - 275px - 40px);
  background-color: #ffffff;

  swiper {
    height: calc(100% - 44px);
    padding: 10px 0 10px;
    box-sizing: border-box;
  }

  .swiper-item-content {
    height: calc(100%);
    overflow-y: auto;
  }
}

@keyframes shadow {
  from {
    box-shadow: 0 0 24px 8px rgba($color: #4088f4, $alpha: .5);
  }

  to {
    box-shadow: 0 0 24px 8px rgba($color: #4088f4, $alpha: .1);
  }
}
</style>